<template>
  <div>
    <QueryHeader />
    <div class="nav banxin">
      <input
        type="text"
        v-model="query_value"
        @focus="focus"
        @blur="blur"
        ref="input"
        @keyup.enter="search"
      />
      <button @click="search">search</button>
    </div>
    <div class="content banxin">
      <!-- 查询出得博客详情 -->
      <div class="left">
        <!-- teb栏 -->
        <el-tabs v-model="activeName">
          <el-tab-pane label="博客" name="first">
            <ul class="article">
              <li
                v-for="(item, uid) in artic"
                :key="uid"
                @click="artic_Derails(item.article_id)"
              >
                <!-- 文章标题 -->
                <div class="title">{{ item.article_title }}</div>
                <!-- 文章摘要 -->
                <div class="abstract">{{ item.article_summary }}</div>
                <!-- 阅读,评论,点赞 -->
                <div class="out-box">
                  <div class="box-left">
                    <span class="reading">{{ item.article_view_count }} </span>
                    <span class="praise">{{ item.article_like_count }} </span>
                    <span class="comments">{{
                      item.article_comment_count
                    }}</span>
                  </div>
                  <div class="box-right">
                    <!-- 用户昵称 -->
                    <span class="user">{{ item.username }}</span>
                    <!-- 发布时间 -->
                    <span class="data">{{
                      timeDetal(item.article_createtime)
                    }}</span>
                  </div>
                </div>
              </li>
            </ul>
            <el-empty description="没有搜到哟宝~" v-if="blognum"></el-empty>
          </el-tab-pane>
          <el-tab-pane label="用户" name="second"> 用户 </el-tab-pane>
          <el-tab-pane label="课程" name="third"> 课程 </el-tab-pane>
          <el-tab-pane label="专栏" name="fourth"> 专栏 </el-tab-pane>
          <el-tab-pane label="更多" name="fifth"> 更多 </el-tab-pane>
        </el-tabs>
        <!-- 页码 -->
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total_number * 10"
          @current-change="currentPage"
          :current-page="page"
          v-if="page_hide"
        >
        </el-pagination>
      </div>
      <!-- 相关搜索 -->
      <div class="right">相关搜索</div>
    </div>
  </div>
</template>

<script>
// 引入导航栏
import QueryHeader from "../../components/QueryHeader.vue";
// 引入混入
import { mixin } from "../../mixin";
export default {
  name: "BlogQuery",
  components: {
    QueryHeader,
  },
  mixins:[mixin],
  data() {
    return {
      query_value: "", //查询关键字
      blognum: false, //为空时显示空状态
      page_hide: true, //页面空状态时隐藏
      artic: [], // 博客数据
      activeName: "first", //导航栏默认先展示博客信息
      page: 1, //页码（默认为1）
      number: 10, //每页默认为10条博客展示
      total_number: 1, //页数
    };
  },
  //混入，引入时间戳处理函数
  mixins: [mixin],
  methods: {
    // 搜索
    search() {
      this.$http({
        method: "post",
        url: "search/searchByKeyWords",
        params: {
          pageNum: this.page, //当前页码，默认为第一页
          pageSize: this.number, // 当前每页显示条数，我这里给10
          keywords: this.query_value.trim(), //当前查询关键字去掉两边空格
        },
      }).then(({ data }) => {
        console.log("chaxun",data);
          console.log( "TOTL",data.data[0].total);
   
        this.artic = []; //博客列表清空
        this.total_number = 1; //博客页码为1
        if (data.data[0].total > 0) {
          this.blognum = false;
          this.page_hide = true;
          this.artic = data.data[1]; //把博客列表放到artic数组里
          this.total_number = Math.ceil(data.data[0].total / 10); //向上取整计算博客页数
          for (var i = 0; i < this.artic.length; i++) {
        // console.log(data.data[2][i].username);
        this.$set(this.artic[i], "username", data.data[2][i].username);
      }
        } else {
          this.blognum = true;
          this.page_hide = false;
        }
         console.log( "BIAN",this.artic[0]);
      });
    },
    // 切换后页码
    currentPage(val) {
      this.page = val;
      // console.log(this.page);
      this.search();
    },
    // 获取博客id,转入查看博客详情
      artic_Derails(id) {
      this.$router.push({
        name: "BlogDetails",
        query: {
          itemid: id,
        },
      });
    },
    // 搜索框获取焦点时高亮
    focus() {
      this.$refs.input.style.border = "1px solid skyblue";
    },
    // 搜索框获取焦点时高亮
    blur() {
      this.$refs.input.style.border = "1px solid #d7d8d8";
    },
  },
  mounted() {
    // 将其他页面搜索框传过来的搜索关键词赋给当前页面存关键词的变量
    this.query_value = this.$route.query.query_value;
    // 从其他页面的导航栏搜索关键词传到查询页面，在页面挂载之前调用查询
    this.search();
  },
};
</script>

<style scoped>
/* 搜索栏 */
.nav {
  /* border: 2px solid skyblue; */
  position: relative;
  height: 100px;
  margin: 20px auto;
  padding: 15px 20px 17px 20px;
  box-shadow: 0 0 10px 0px rgb(219, 218, 218);
  box-sizing: border-box;
}
.nav input {
  height: 100%;
  width: 700px;
  font-size: 25px;
  outline: none;
  padding: 0 30px;
  border: 1px solid #d7d8d8;
  background-color: #f5f6f7;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}
.nav input:hover {
  border: 1px solid skyblue;
}
.nav button {
  height: 100%;
  width: 200px;
  border: 0;
  outline: none;
  font-size: 40px;
  font-weight: 700;
  background-color: rgb(171, 222, 243);
  cursor: pointer;
  height: 70px;
  position: absolute;
  top: 15px;
  color: rgb(67, 70, 70);
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}
.nav button:hover {
  color: black;
}
/* 搜索内容展示区 */
.content {
  display: flex;
  box-sizing: border-box;
  margin: 20px auto;
  padding-bottom: 20px;
}
/* 左边搜索内容 */
.left {
  flex: 7;
  padding: 30px;
  margin-right: 20px;
  box-shadow: 0 0 10px 0px rgb(219, 218, 218);
}
.left /deep/.el-tabs__item {
  font-size: 20px;
}
.left /deep/ .el-tabs__active-bar {
  width: 40px;
}
.left .article li {
  cursor: pointer;
  border-bottom: 1px solid rgb(240, 239, 239);
  margin: 10px 0 20px 0;
}
.left .article .title {
  font-size: 25px;
  font-weight: 700;
  /* margin-bottom: 10px; */
}
.left .article .abstract {
  font-size: 16px;
  color: #aaaaaa;
  margin: 15px 0;
}
.reading,
.praise,
.comments,
.user,
.data {
  color: #aaaaaa;
  display: inline-block;
  margin: 0 40px 0px 0;
  font-size: 18px;
}
.reading::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e62b";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 5px;
  font-size: 20px;
}
.praise::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\ec7f";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 5px;
  font-size: 20px;
}
.comments::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e8b9";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 5px;
  font-size: 18px;
}
.out-box {
  height: 30px;
  position: relative;
}
.box-left {
  position: absolute;
  left: 0;
}
.box-right {
  position: absolute;
  right: 0;
}
/* 分页位置 */
.el-pagination {
  text-align: center;
}
.left /deep/ .el-pagination.is-background .el-pager li,
.left /deep/ .el-pagination.is-background .btn-prev,
.left /deep/ .el-pagination.is-background .btn-next {
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 18px;
}
/* 右边相关搜索 */
.right {
  flex: 3;
  padding: 30px;
  box-shadow: 0 0 10px 0px rgb(219, 218, 218);
}
</style>